<template>
  <div class="table1">
    <table
      v-loading="lodding"
      element-loading-text="加载中..."
      :element-loading-spinner="svg"
      element-loading-svg-view-box="-10, -10, 50, 50"
      element-loading-background="rgba(122, 122, 122, 0.5)"
    >
      <tbody>
        <tr>
          <th></th>
          <th v-for="(column, index) in columns" :key="index" v-show="column.feg">
            {{ column.label }}
          </th>
          <th></th>
        </tr>
        <tr v-for="(item, index) in list" :key="item._id">
          <td>{{ index + 1 }}</td>
          <td v-for="(column, index) in columns" :key="index" v-show="column.feg">
            <span v-if="column.key != '_id'">
              <span v-if="column.key == 'state'">
              {{item[column.key] ? '启用': '禁用'}}
              </span>
              <span v-else>
              {{ item[column.key] }}
              </span>
            </span>
            <span v-else>
              {{ item[column.key].slice(-2) }}
            </span>
          </td>
          <td>
            <el-dropdown>
              <span>
                操作
                <el-icon>
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="xiang(item)">详情</el-dropdown-item>
                  <el-dropdown-item>详情(新窗口)</el-dropdown-item>
                  <el-dropdown-item>评论</el-dropdown-item>
                  <el-dropdown-item>+添加提醒设置</el-dropdown-item>
                  <el-dropdown-item>编辑</el-dropdown-item>
                  <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
    
<script setup lang='ts'>
import { ref, reactive, onMounted } from "vue";
// 接收父组件参数
const props = defineProps({
  list: {
    type: Array,
    default: [],
  },
  columns: {
    type: Array,
    default: [],
  },
  page:{
    type: Number,
  },
  pageSize:{
    type: Number
  },
  lodding:{
    type:Boolean,
    default: false
  },
  xiang: {
    type: Function,
    default: ()=>{}
  }
});
console.log(props.list, 'list');
console.log(props.columns, 'columns')

</script>
    
<style scoped>
@import url(../style/zcss.css);
</style>